import '../style/comments.less'
import { useEffect, useState } from 'react';
import _ from 'lodash';
import classNames from 'classnames';
import axios from 'axios';
import { useRef } from 'react';
function Comments() {
    // 评论列表
    const [commentsList, setCommentsList] = useState([])
    useEffect(()=>{
        async function getList(){
            const res =await axios.get('http://localhost:3005/list')
            setCommentsList(res.data)
        }
        getList()
    },[])
    // tab栏
    const tabs = [
        { type: 'hot', text: '最热' },
        { type: 'time', text: '最新' },
    ]
    const [type, setType] = useState('hot')
    const [comContent, setComContent] = useState('')

    const inputRef = useRef(null);
    let num = commentsList.length;

    const addItem = () => {
        const comItem = {
            text: comContent,
            pid: 'cj',
            time: '2024.1.4',
            good: 10
        }
        // add
        setCommentsList([...commentsList, comItem])
        // clear
        setComContent('')
        // reFocus
        inputRef.current.focus()
    }
    const deleteItem = (dindex) => {
        setCommentsList(commentsList.filter((_, index) => index !== dindex))
    }
    const handleTabsChange = (type) => {
        setType(type)
        // 排序
        if (type === 'hot') {
            setCommentsList(_.orderBy(commentsList, 'good', 'desc'));
        } else {
            setCommentsList(_.orderBy(commentsList, 'time', 'desc'));
        }
    }
    const inpChange = (val) => {
        setComContent(val)
    }

    return (
        <div className="comments">
            <div className="title">
                <div>评论 <span>{num}</span></div>
                <div>
                    {tabs.map(item =>
                        <span onClick={() => handleTabsChange(item.type)}
                            className={classNames('nav-item', { 'active': item.type === type })}
                            key={item.type}>{item.text}</span>
                    )}
                </div>
            </div>
            <div className='commentsArea'>
                <div className='comTitle'>
                    <input 
                    ref={inputRef}
                    placeholder='发布一条评论'
                    type="text" value={comContent} 
                    onChange={(e)=>{inpChange(e.target.value)}} />
                    <button onClick={addItem}>发布</button>
                </div>
                <div className='comContent'>
                    {commentsList.map((item, index) => {
                        return <div className='com-item' key={index}>
                            <div>jack</div>
                            <h4>{item.text}</h4>
                            <div className='about'>
                                <span>{item.time}</span>
                                <span>点赞数: {item.good}</span>
                                {item.pid === 'cj' &&
                                    <span style={{ cursor: "pointer" }} onClick={() => deleteItem(index)}>delete</span>}
                            </div>
                        </div>
                    })}
                </div>
            </div>
        </div>
    )
}
export default Comments;